<!--
  * 办公/公告分类 表单
  * 
  * @Author:    天青飞扬
  * @Wechat:    18576228047
  * @Email:     1787585212@qq.com 
  * @Date:      2024-08-15 20:15:49
-->
<template>
  <a-drawer
    :title="formData.categoryId ? '编辑' : '新建'"
    :open="visibleFlag"
    size="large"
    :footerStyle="{ textAlign: 'right' }"
    @close="onClose"
    :destroyOnClose="true"
  >

    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
      <a-form-item label="名称" name="name">
        <a-input v-model:value="formData.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input v-model:value="formData.sort" placeholder="请输入排序" />
      </a-form-item>
    </a-form>

    <template #extra>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { deepCopy } from '/@/lib/utils';
import { noticeCategoryApi } from '/@/api/business/office/notice-category-api';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';

const emits = defineEmits(['reloadList']);

// ----------------- 显示/关闭 ------------------

const visibleFlag = ref(false);

function showModal(categoryId) {
  Object.assign(formData, defaultFormData);

  if (categoryId) {
    getNoticeCategoryInfo(categoryId);
  }

  visibleFlag.value = true;

  nextTick(() => {
    formRef.value.clearValidate();
  });
}

function onClose() {
  visibleFlag.value = false;
}

// -------------------- 表单 --------------------

const formRef = ref();

const formCategoryId = undefined

const defaultFormData = {
  categoryId: undefined, // 分类id
  name: '', // 名称
  sort: 0, // 排序
}

const formData = reactive({ ...defaultFormData });

const formRules = {
  name: [{ required: true, message: '请输入' }],
};

async function onSubmit() {
  try {
    await formRef.value.validateFields()
    updateNoticeCategory()
  } catch (err) {
    console.log(err)
    message.error('参数验证错误，请仔细填写表单数据!')
  }
}

async function getNoticeCategoryInfo(categoryId) {
   try {
     SmartLoading.show();
     const result = await noticeCategoryApi.getNoticeCategoryInfo(categoryId);
     Object.assign(formData, result.data);
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    SmartLoading.hide();
  }
}

async function updateNoticeCategory() {
  try {
    SmartLoading.show();
    if (formData.categoryId) {
      await noticeCategoryApi.updateNoticeCategory(formData.categoryId, formData);
    } else {
      await noticeCategoryApi.createNoticeCategory(formData);
    }
    message.success('保存成功');
    emits('reloadList');
    onClose();
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    SmartLoading.hide();
  }
}

// --------------- 暴露的方法和内容 --------------

defineExpose({
  showModal,
});

</script>